 /* 写媒体查询,将可视窗口限制在1024~1980 */
        /* 实现窗口适配 */
        @media screen and (max-width:1024px) {
            html{
                font-size: 42.66px !important;
            }
        }
        @media screen and (min-width:1024px) {
            html{
                font-size: 80px !important;
            }
        }

body{
    //指定一个背景图片
    background: url(../images/bg.jpg) no-repeat;
    //设置背景缩放
    background-size: cover;
}

.viewport{
    //父盒子设置为flex，子盒子通过flex设置占父盒子比例
    display: flex;
    //设置最小宽度
    min-width: 1024px;
    //设置最大宽度
    max-width: 1920px;
    //设置全局居中
    margin: 0 auto;
    //将头部条作为背景放入
    background: url(../images/logo.png) no-repeat;
    //设置背景缩放
    background-size: contain;
    //设置最小高度
    min-height: 780px;
    //设置内边距，显示出来上面的头部图片
    padding: 1.1rem .25rem 0;

    .culomn{
        flex: 3;
        // background-color: #bfa;
    }
    .culomn:nth-child(2){
        flex: 4;
    }
}

// 设置公共面板样式（公共边框样式）
.panel{
    position: relative;
    //添加边框
    border: 15px solid ;
    //设置不同边的不同宽度（根据切割的边距决定）
    border-width: .6375rem .475rem .25rem 1.65rem;
    //设置边框图片的路径
    border-image-source: url(../images/border.png);
    //设置边框图片切割
    border-image-slice: 51 38 20 132;
    margin-bottom: .25rem;

    h3{
        font-size: .25rem;
        color: #fff;
        font-weight: 400;
    }

    .inner{
        position: absolute;
        top: -0.6375rem;
        left: -1.65rem;
        right: -0.475rem;
        bottom: -0.25rem;
        padding: .3rem .45rem;
    }
}

//设置概览区域
.overview{
    height: 1.375rem;

    ul{
        //把ul的空间平均分配给四个li
        display: flex;
        justify-content: space-between;

        //设置li
        li{

            h4{
                font-size: .35rem;
                color: #fff;
                margin: 0 0 .1rem .06rem;
            }

            span{
                font-size: .2rem;
                color: skyblue;
            }
        }
    }
}

//设置监控区域
.monitor{
    height: 6rem;
}
//这个区域等后面学完ECharts之后回来补，ECharts最重要

/* 点位分布统计模块制作 */
.point {
    height: 4.25rem;
  }
  .point .chart {
    display: flex;
    margin-top: 0.3rem;
    justify-content: space-between;
  }
  .point .pie {
    width: 3.9rem;
    height: 3rem;
    margin-left: -0.125rem;
    background-color: #bfa;
  }
  .point .data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2.1rem;
    padding: 0.45rem 0.375rem;
    box-sizing: border-box;
    background-image: url(../images/rect.png);
    background-size: cover;
  }
  .point h4{
    margin-bottom: 0.15rem;
    font-size: 0.35rem;
    color: #fff;
  }
  .point span {
    display: block;
    color: #4c9bfd;
    font-size: 0.2rem;
  }
